<template>
	<!-- 登录页面 -->
	<view class="container">
		<view class="avatar">
			<image src="/static/login_form_icons/logo.png" class="logo"></image>
		</view>
		<form @submit="formSubmit" @reset="formReset" class="register-form-container">
			<view class="title">
				<text>登录</text>
			</view>
			<view class="form-item">
				<image src="/static/login_form_icons/phone.png" class="icon"></image>
				<input class="form-input" name="phone" type="number" placeholder="请输入手机号" />
			</view>
			<view class="form-item">
				<image src="/static/login_form_icons/pwd.png" class="icon"></image>
				<input class="form-input" name="password" :type="passwordType" placeholder="请输入密码" />
				<image v-show="showPwd" src="/static/hidden-eye.png" @click.stop="showKey" class="eye"></image>
				<image v-show="!showPwd" src="/static/show-eye.png" @click.stop="showKey" class="eye"></image>
			</view>
			<view class="forgetpwd" @click="forgetpwd()">
				<text>忘记密码</text>
			</view>
			<view class="form-item">
				<button class="form-btn" form-type="submit">登录</button>
			</view>
		</form>
		<view class="confirm">
			<checkbox-group>
				<checkbox color="red" :checked="agree" @click="()=>agree=!agree">我已阅读并同意
					<text @click.stop="showUserStatement()" class="font">&lt;&lt;用户协议&gt;&gt;</text>和
					<text @click.stop="showPrivacyPolicy()" class="font">&lt;&lt;隐私协议&gt;&gt;</text>
				</checkbox>
			</checkbox-group>
		</view>
		<u-modal :title="title" :show="showModal" :zoom="false" @confirm="confirm">
			<!-- <rich-text :nodes="statementData"></rich-text> -->
			<u-parse :content="statementData"></u-parse>
		</u-modal>
	</view>
</template>

<script>
	import store from '@/store/store.js'
	import graceChecker from "@/common/graceChecker.js"
	import _user from "@/common/user.js"
	import _constant from "@/common/constant.js"

	export default {
		created() {
			console.log(this.statementData)
		},
		data() {
			return {
				statementData: '',
				showModal: false,
				agree: false,
				passwordType: 'password',
				showPwd: true,
				title: ''
			}
		},
		methods: {
			formReset: function(e) {
				console.log('清空数据')
			},
			//初始化声明协议
			async setStatementData(id) {
				const {
					body
				} = await uni.$H.get('/user/userAgreement', {
					agreeId: id
				}, {
					authCode: false
				})
				this.statementData = body.text
			},
			confirm() {
				this.showModal = false
				this.agree = true
			},
			showKey() {
				this.showPwd = !this.showPwd
				this.passwordType = this.showPwd ? 'password' : 'text'
			},
			forgetpwd() {
				uni.navigateTo({
					url: '/pages/login_forget_pwd/login_forget_pwd'
				})
			},
			showUserStatement() {
				this.setStatementData(_constant.userTreatyId);
				this.title = '爱芯房用户协议'
				this.showModal = true
			},
			showPrivacyPolicy() {
				this.setStatementData(_constant.privacyTreatyId);
				this.title = '爱芯房隐私权限'
				this.showModal = true
			},
			formSubmit: function(e) {
				if (!this.agree) {
					uni.$showMsg("请先同意隐私协议")
					return
				}
				console.log(e.detail.value)
				let formData = e.detail.value
				const loginRule = [{
						name: "phone",
						checkType: "string",
						checkRule: "1,100",
						errorMsg: "手机号不能为空"
					},
					{
						name: "phone",
						checkType: "phoneno",
						errorMsg: "手机号格式不正确"
					},
					{
						name: "password",
						checkType: "string",
						checkRule: "1,100",
						errorMsg: "密码不能为空"
					},
				]
				let checkRes = graceChecker.check(formData, loginRule)
				if (checkRes) {
					formData.wxId = ''
					formData.userName = ''
					formData.userType = '4'
					this.fecthData(formData)
				} else {
					uni.$showMsg(graceChecker.error)
				}

			},
			async fecthData(form) {
				const res = await _user.login(form)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.avatar {
		margin-top: 69rpx;
		margin-left: 327rpx;
		margin-bottom: 100rpx;

		.logo {
			height: 120rpx;
			width: 110rpx;
		}
	}

	.register-form-container {
		.forgetpwd {
			position: relative;
			left: 566rpx;
			color: #515151;
			font-weight: bold;
			font-size: 24rpx;
		}
	}

	.title {
		margin-left: 50rpx;
		font-size: 36rpx;
		font-weight: bold;
		color: #333333;
		margin-bottom: 76rpx;
	}

	.form-item {
		display: inline-flexbox;
		flex-direction: column;
		position: relative;

		.icon {
			position: absolute;
			height: 30rpx;
			width: 22rpx;
			margin-top: 28rpx;
			margin-left: 30rpx;
		}

		.eye {
			position: absolute;
			width: 41rpx;
			height: 30rpx;
			top: 30rpx;
			right: 100rpx;
		}

		margin-top: 44rpx;
		padding-left: 50rpx;
		padding-right: 50rpx;

		.form-input {
			padding-left: 60rpx;
			margin-bottom: 40rpx;
			width: 560rpx;
			border: 1rpx solid transparent;
			line-height: 88rpx;
			height: 88rpx;
			background: #F4F4F4;
			box-shadow: 0rpx 5rpx 15rpx 0rpx rgba(0, 0, 0, 0.05);
			border-radius: 44rpx;
		}

		.form-btn {
			color: #FFFFFF;
			height: 88rpx;
			width: 100%;
			margin-top: 105rpx;
			color: #E62029;
			border: 1rpx solid #E62029;
			border-radius: 44rpx;
		}
	}

	.confirm {
		position: absolute;
		bottom: 114rpx;
		left: 78rpx;
		font-size: 24rpx;
		font-weight: bold;
		color: #333333;

		.font {
			color: #E62029;
		}
	}

	.form-input:focus {
		outline: none;
		border: 1rpx solid transparent;
	}
</style>
